<template>
    <el-dialog class="form-dialog"
               custom-class="way"
               :show-close="false"
               :close-on-press-escape="true"
               :close-on-click-modal="false"
               :width="width"
               :visible="visible"
               :fullscreen="fullscreen" v-dialogDrag>
        <div class="el-dialog__header-slot _drag" slot="title">
            <span class="el-dialog__header-slot-title">{{title}}</span>
            <div class="el-dialog__header-slot-button">
                <button class="maximize" @click="fullscreen=!fullscreen">
                    <i :class="fullscreen ? 'el-icon-minus' : 'el-icon-full-screen'"></i>
                </button>
                <button class="close" @click="close">
                    <i class="el-icon-close"></i>
                </button>
            </div>
        </div>
        <slot></slot>
        <div v-if="$slots.footer">
            <slot name="footer"></slot>
        </div>
        <div slot="footer" v-else>
            <el-button size="small" type="default" @click="close">取消</el-button>
            <el-button size="small" type="success" @click="submit">保存</el-button>
        </div>
    </el-dialog>
</template>

<script>
    let events = {
        SUBMIT: 'submit',
        CLOSE: 'close'
    }

    export default {
        props: {
            title: {
                type: String
            },
            width: {
                type: String,
                default: "550px"
            },
            visible: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                fullscreen: false
            }
        },
        methods: {
            close() {
                this.$emit(events.CLOSE)
            },
            submit() {
                this.$emit(events.SUBMIT)
            }
        }
    };
</script>

<style lang="scss">
    .form-dialog {

        .el-dialog__body {
            padding: 20px;
        }

        .el-dialog__header {
            padding: 10px !important;
            text-align: center;
            border-bottom: 1px solid #f7f7f7;

            .el-dialog__header-slot {
                height: 25px;
                line-height: 25px;
                text-align: center;
                position: relative;
            }

            .el-dialog__header-slot-title {
                display: block;
                font-size: 15px;
                letter-spacing: 0.5px;
            }

            .el-dialog__header-slot-button {
                display: flex;
                justify-content: flex-end;
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }

            .el-dialog__header-slot-button .minimize, .el-dialog__header-slot-button .maximize, .el-dialog__header-slot-button .close {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 25px;
                width: 40px;
                border: 0;
                background-color: #fff;
                cursor: pointer;
                outline: none;
            }

            .el-dialog__header-slot-button .minimize i, .el-dialog__header-slot-button .maximize i, .el-dialog__header-slot-button .close i {
                font-size: 16px;
                &:hover {
                    opacity: 0.7;
                }
            }
        }

        .el-dialog__footer {
            padding-bottom: 15px;
        }
    }

    /*
    @keyframes dialog-fade-in {
        0% {
            transform: translate3d(0, -100%, 0);
            opacity: 0;
        }
        100% {
            transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
     */

    @keyframes dialog-fade-out {
        0%, 100% {
            opacity: 0;
        }
    }
</style>
